import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import { viteMockServe } from 'vite-plugin-mock'
// https://vitejs.dev/config/
export default defineConfig(({ command }) => {
  return {
    resolve: {
      alias: {
        '@': path.resolve('./src'), // 相对路径别名配置，使用 @ 代替 src
      },
    },
    plugins: [
      vue(),
      AutoImport({
        imports: ['vue', 'vue-router'],
        resolvers: [
          // 自动导入图标组件
          IconsResolver({
            prefix: 'Icon',
          }),
          ElementPlusResolver(),
        ],
        dts: 'src/types/auto-import.d.ts',
        eslintrc: {
          // 已存在文件设置默认 false，需要更新时再打开，防止每次更新都重新生成
          enabled: false,
          // 生成文件地址和名称
          filepath: './.eslintrc-auto-import.json',
          globalsPropValue: true,
        },
      }),
      Components({
        resolvers: [
          IconsResolver({
            // 使用图标方法为  <i-ep-xxx></i-ep-xxx>
            enabledCollections: ['ep'],
          }),
          ElementPlusResolver(),
        ],
        dts: 'src/types/auto-component.d.ts',
      }),
      Icons({
        // 自动安装图标库
        autoInstall: true,
      }),
      viteMockServe({
        enable: command === 'serve', // 保证项目开发阶段可以使用 mock 接口
      }),
    ],
    css: {
      // 预处理器配置项
      preprocessorOptions: {
        // 全局使用variable.scss里面的参数
        scss: {
          javascriptEnabled: true,
          additionalData: '@import "./src/styles/variable.scss";',
        },
      },
    },
  }
})
